<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<link rel="stylesheet" type="text/css" href="libs/bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
		<script src="./libs/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
		
		<script src="libs/bootstrap-3.3.7-dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<!-- 自己的css样式，放最后 -->
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
	</head>
	<body>
		<!-- 头部导航 -->
		<nav class="navbar navbar-default navbar-inverse">
		  <!-- <div class="container-fluid">   
		   .container （固定宽度）或 .container-fluid （100% 宽度）
		  -->
		  <div class="container">
		    <!-- Brand and toggle get grouped for better mobile display -->
		    <div class="navbar-header">
		      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
		        <span class="sr-only">Toggle navigation</span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		      </button>
		      <a class="navbar-brand" href="#">个人记忆管理系统</a>
		    </div>
		
		    <!-- Collect the nav links, forms, and other content for toggling -->
		    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
		      <ul class="nav navbar-nav">
		        <li class="active"><a href="#">首页 <span class="sr-only">(current)</span></a></li>
		        <li><a href="#">其他</a></li>
		        
		      </ul>
		      
		      <ul id="un-login" class="nav navbar-nav navbar-right">
		        <li><a href="./html/login.html">登录</a></li>
		        <li><a href="./html/regist.html">注册</a></li>
		      </ul>
			  
			  <ul id="is-login" class="nav navbar-nav navbar-right hide">
			    <li><a href="#">欢迎您，<b></b></a></li>
			    <li id="logOut"><a href="#">退出</a></li>
			  </ul>
			  
			  
		    </div><!-- /.navbar-collapse -->
		  </div><!-- /.container-fluid -->
		</nav>
		
		
		<!-- 路径导航 -->
		<ol class="breadcrumb container">
		  <li><a href="#">Home</a></li>
		  <li><a href="./html/girlsPic.html">Library</a></li>
		  <li class="active">Data</li>
		</ol>
		
		<div class="container">
			<!-- Button trigger modal  添加记忆-->
			<!-- <button type="button" class="btn btn-primary btn-lg btn_my" data-toggle="modal" data-target="#myModal">
			  添加记忆
			</button> -->
			
			<button type="button" class="btn btn-primary btn-sm btn_my" data-toggle="modal" data-target="#myModal" id="addInfo">添加记忆</button>
			
			<!-- Modal -->
			<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
			  <div class="modal-dialog" role="document">
			    <div class="modal-content">
			      <div class="modal-header">
			       <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
			        <h4 class="modal-title my_h4" id="myModalLabel">添加记忆</h4>
					
			      </div>
			      <div class="modal-body">
			        <form class="form-horizontal">
			          <div class="form-group">
			            <label for="inputName" class="col-sm-2 control-label">记忆名称</label>
			            <div class="col-sm-10">
			              <input type="text" class="form-control" id="inputName" placeholder="请输入记忆名称">
			            </div>
			          </div>
			          <div class="form-group">
			            <label for="inputPrice" class="col-sm-2 control-label">记忆价格</label>
			            <div class="col-sm-10">
			              <input type="text" class="form-control" id="inputPrice" placeholder="请输入记忆价格">
			            </div>
			          </div>
					  <div class="form-group">
					    <label for="inputNum" class="col-sm-2 control-label">记忆数量</label>
					    <div class="col-sm-10">
					      <input type="text" class="form-control" id="inputNum" placeholder="请输入记忆数量">
					    </div>
					  </div>
			          
			        </form>
			      </div>
			      <div class="modal-footer">
			        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
			        <button type="button" class="btn btn-primary" id = "addSure">添加</button>
			      </div>
			    </div>
			  </div>
			</div>
			<!-- 表格 -->
			<table class="table table-bordered table-striped table-shop table-hover">
			  <thead>
				  <tr>
					  <td>编号</td>
					  <td>名称</td>
					  <td>年限</td>
					  <td>数量</td>
					  <td>操作</td>
				  </tr>
			  </thead>
			  
			  <tbody id = 'tbd'></tbody>
			  
			</table>
		</div>
		
		
		<!-- 默认分页 -->
		<nav aria-label="Page navigation container" class="mid_my">
		  <ul class="pagination">
		    <li>
		      <a href="#" aria-label="Previous">
		        <span aria-hidden="true">&laquo;</span>
		      </a>
		    </li>
		    <li><a href="#">1</a></li>
		    <li><a href="#">2</a></li>
		    <li><a href="#">3</a></li>
		    <li><a href="#">4</a></li>
		    <li><a href="#">5</a></li>
		    <li>
		      <a href="#" aria-label="Next">
		        <span aria-hidden="true">&raquo;</span>
		      </a>
		    </li>
		  </ul>
		</nav>
		
		
		<script src="js/utils.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/select.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/edit.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/add.js" type="text/javascript"></script>
		
		<script type="text/javascript">
		// 根据登录状态，显示对应的   登录注册/欢迎您退出
			var unLogin = document.querySelector('#un-login')
			var isLogin = document.querySelector('#is-login')
			var nameWrap = document.querySelector('#is-login b')
			var logout = document.querySelector('#logOut')
			// 验证cookie是否存在
			var username = utils.getCookie('name')
			if (username) {
			  // 已登录
			  unLogin.className = 'hide'
			  isLogin.className = 'nav navbar-nav navbar-right'
			  nameWrap.innerHTML = username
			}
			
			logout.addEventListener('click', function () {
			  if (confirm('确定要退出吗？')) {
			    // cookie清空
			    utils.setCookie('name', '', { expires: -1, path: '/' })
			    // 把ul显示隐藏切换一下
			    unLogin.className = 'nav navbar-nav navbar-right'
			    isLogin.className = 'hide'
			  }
			})
			
			
			
			
		</script>
	</body>
</html>
